<template>
	<view>
		<cu-custom :isBack="true" :bgColor="'bg-red'">
			<block slot="backText"></block>
			<block slot="content">股权查询</block>
		</cu-custom>
		<scroll-view scroll-x class="bg-white nav text-center">
			<view class="cu-item my-cu-item" v-for="(item,index) in listObj" :key="index" :class="index==cur?'cur text-reg':'text-black'"
			 @tap="changeStatus(index)" :data-id="index">
				<view class="">{{item}}</view>
				
			</view>
		</scroll-view>
		<view class="whole-box" >
			
			<view class="gold-black-box">
				<view class="top-box">
					<view class="top-box-content">
						<view class="note-price">
							<text class="note">我的股权数量</text>
							<text class="price text-price">{{statistics && statistics.gold > 0 ? statistics.gold : 0}}</text>
						</view>
					</view>
				</view>
				<view v-if="cur==1">
					<view class="set-box">
						<view style="margin-left: 20px;">当前兑换比例</view>
						<view style="margin-left: 20px;">1:{{money_roll_to_intergal}}</view>
					</view>
					<view class="list-selcet">
						<view class="top-left-box">
							<view class="current-num">
								<text>兑换股权</text>
							</view>
							<view class="input-box">
								<input style="font-size: 24rpx;border:1px solid #1A181E" type="number" placeholder="请输入需要兑换的数量" placeholder-class="my-input-holder" v-model="formData.coupon" @input="onInput"/>
								<text class="curr-zz"  @tap="onSet">兑换查询</text>
							</view>
							<view class="current-num"><text>积分</text><text v-if="integral>0">{{integral}}</text>
								
							</view>
							<view class="integral-btn" v-if="objsub==1">
								<text class="btn" >取消兑换</text>
								<text class="btn" >确认兑换</text>
							</view>
							<view class="integral-btn" v-else>
								<text class="subbtn" @tap="onCleone">取消兑换</text>
								<text class="subbtn" @tap="onSubmit">确认兑换</text>
							</view>
							
						</view>
					</view>
					<view class="bg-white margin-top">
						<view class="overflow">
							
							<view class="content" v-if="intro">
								<!-- <rich-text :nodes="detail.intro"></rich-text> -->
								<mp-html :content="intro"></mp-html>
							</view>
						</view>
					</view>
					<view class="bg-white margin-top">
						<view class="overflow bg-white" style="padding: 20rpx 20rpx;">
							兑换历史
							<scroll-view scroll-y :style="obj_list.length == 0 ? 'height:100px;' : 'height:'+scrollHeight+'px'" @scrolltolower="getMore2">
								<block v-for="(obj_item,i) in obj_list" :key="i" v-if="obj_list.length != 0">
									<view class="myset-data-box">
										<view class="my-data-box-content">
											<view class="left-box">
												<view class="">积分数量</view>
											</view>
											<view class="">+{{obj_item.integral}}</view>
										</view>
										<view class="my-data-box-content2">
											
											<view class="left-box">
												<view class="">股权数量</view>
											</view>
											<view class="" >-{{obj_item.pay_num}}</view>
										</view>
										<view class="my-data-box-content3">
											<view class="left-box">
												<view class="">时间</view>
											</view>
											<view class="" >{{$common.timeFormat(obj_item.created_at)}}</view>
										</view>
									</view>
								</block>
								<block v-if="obj_list.length == 0">
										<text style="color: #ffffff;">暂无记录</text>
								</block>
							</scroll-view>
						</view>
					</view>
				</view>
				<view class="list" v-if="cur==0">
					<scroll-view scroll-y :style="list.length == 0 ? 'height:100px;' : 'height:'+scrollHeight+'px'" @scrolltolower="getMore">
						<block v-for="(item,index) in list" :key="index" v-if="list.length != 0">
							<view class="my-data-box">
								<view class="my-data-box-content">
									<view class="left-box">
										<view class="title">{{item.remark}}</view>
										<view class="time">{{$common.timeFormat(item.created_at)}}</view>
									</view>
									<view class="num up" >{{item.num}}</view>
								</view>
							</view>
						</block>
						<block v-if="list.length == 0">
								<text style="color: #ffffff;">暂无记录</text>
						</block>
						<view v-else class="cu-load margin-center text-white" :class="loading?'loading':'over'"></view>
					</scroll-view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import mpHtml from '@/components/mp-html/mp-html.vue';
	import {
		mapState
	} from 'vuex'
	export default {
		computed: mapState(['forcedLogin', 'hasLogin', 'channelLogin']),
		mounted() {
			this.getScrollH()
		},
		data() {
			return {
				objsub:1,
				statistics: null,
				member:null,
				loading: false,
				scrollHeight: 600,
				integral:0,
				formData:{
					coupon:''
				},
				cur:0,
				listObj:['股权查询','股权兑换'],
				money_roll_to_intergal:0,
				list: [],
				obj_list:[],
				hasMore: true,
				page: 1,
				objpage: 1,
				intro:'',
				stock_num:0,
				old_integral:0,
			}
		},
		onLoad() {
		},
		onShow() {
			if (this.$common.loginAuth(true)) {
				// this.$nextTick((r) => {
				// 	uni.startPullDownRefresh({})
				// })
				this.$common.getMember().then((member)=>{
					this.member = member
					this.getTotal();
					this.getList()
					this.getInfo()
				})
			}
		},
		methods: {
			changeStatus(i){
				
				this.cur=i
				if(i==0){
					this.list = []
					this.page = 1
					this.hasMore = true
					this.loading = false
					this.getList()
				}
			},
			getTotal() {
				this.$http
					.get('integral_info', {})
					.then((response) => {
						this.statistics = response.data.data
						
						this.money_roll_to_intergal = response.data.data._con.levelupauto_config.stock_num
						this.intro=response.data.data._con.levelupauto_config.detail
						this.stock_num=this.statistics.acc.stock_num
						this.old_integral=this.statistics.acc.old_integral
					})
					.catch((response) => {
						console.log(response)
					})
			},
			getScrollH() {
				let sys = uni.getSystemInfoSync();
				let winHeight = sys.windowHeight;
				//console.log(winHeight)
				let _this = this
				// 计算scroll-view高度
				let query = uni.createSelectorQuery().in(_this);
				query.select('.top-box').boundingClientRect()
				query.selectViewport()
				query.exec(function(res) {
					//console.log(res)
					_this.scrollHeight = winHeight - res[0].bottom - 10 - 24
					
				})
			},
			onInput(e) {
				// 【不用v-model绑定表单,直接时间获取值】这种方式是uni-app官方的方式,测试结果正确！
				console.log(e.detail)
				// e.detail.value = parseInt(e.detail.value);
				this.formData.coupon = e.detail.value
				
				// console.log(parseInt(e.detail.value))
			},
			onSet(){
				if(this.money_roll_to_intergal==0){
					this.$common.showError('暂未开通兑换功能')
					return
				}
				this.integral = this.formData.coupon * this.money_roll_to_intergal
				this.objsub=2
			},
			onCleone(){
				this.formData.coupon = ''
				this.integral = 0
				this.objsub=1
			},
			onSubmit(){
				let formData = this.formData
				if (formData.coupon < 1) {
					this.$common.showError('请输入大于1的兑换数量')
					return
				}
				if (this.integral <= 0) {
					this.$common.showError('请先兑换查询')
					return
				}
				
				uni.showLoading({
					title: '处理中'
				})
				var numReg = /^[0-9]*$/
				var numRe = new RegExp(numReg)
				if (!numRe.test(formData.coupon)) {
					this.$common.showError('请输入整数')
					return
				}
				this.$http.post('gold_integral', formData).then((response) => {
				uni.hideLoading()
				if (response.data.data.status == 200) {
					this.$common.showSuccess('兑换成功')
					this.getTotal()
					this.getList()
					this.formData.coupon = 0
					this.integral = 0
				}
				}).catch((response) => {
					uni.hideLoading()
				this.checkLoading = false
				})
			},
			getMore(){
				this.getList()
			},
			getMore2(){
				this.getInfo()
			},
			getInfo(){
				this.$http
					.get('integral_gold', {
							page: this.objpage
						})
					.then((response) => {
						let obj_list = this.obj_list
						if (response.data.data.length > 0) {
							obj_list = obj_list.concat(response.data.data)
						}
						this.obj_list = obj_list
						this.objpage += 1
						uni.hideLoading()
						uni.stopPullDownRefresh()
					})
					.catch((response) => {
						uni.hideLoading()
						uni.stopPullDownRefresh()
					})
			},
			getList() {
				if (this.hasMore && !this.loading) {
					this.loading = true
					let type = this.TabCur == 0 ? 1 : -1
					this.$http
						.get('integral_details', {
							credit_type: 'gold',
							page: this.page
						})
						.then((response) => {
							let list = this.list
							if (response.data.data.length > 0) {
								list = list.concat(response.data.data)
							} else {
								this.hasMore = false
							}
							this.list = list
							this.page += 1
			
							this.loading = false
							uni.hideLoading()
							uni.stopPullDownRefresh()
						})
						.catch((response) => {
							uni.hideLoading()
							uni.stopPullDownRefresh()
						})
			
				}
			},
			// onReachBottom() {
			// 	this.getList()
			// },
			onPullDownRefresh() {
				this.getTotal()
				this.list = []
				this.page = 1
				this.hasMore = true
				this.loading = false
				this.getList()
			},

		},
	}
</script>


<style>
	
	.top-box-content .note-price{
		flex: 1;
		height: 102rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.set-box{
		flex: 1;
		height: 102rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.note-price .note{
		font-size: 36rpx;
		font-weight: bold;
		color: #ffffff;
	}
	.note-price .price{
		font-size: 38rpx;
		font-weight: bold;
		color: #ffffff;
	}
	.curr-zz{
		margin-left: 20rpx;
		font-size: 14px!important;
		background: #007aff;
		width: 160rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		border-radius: 15px;
		color: #ffffff !important;
	}
	.whole-box{
		background-image: url(../../static/red-new/new-back.png);
		background-size: 100% 100%;
		min-height: calc(100vh - 45px - 50rpx);
		padding: 25rpx 0;
	}
	.gold-black-box{
		padding: 25rpx 0;
		margin: 0 10rpx;
		/* border: 2rpx solid #999999; */
		border-radius: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.gold-black-box .top-box{
		/* margin-top: 25rpx; */
		width: 690rpx;
		height: 200rpx;
		/* border: 2rpx solid #999999; */
		border-radius: 30rpx;
		overflow: hidden;
		position: relative;
		/* background-color: #ffffff; */
	}
	.list-selcet{
		margin-top: 15rpx;
		width: 690rpx;
		height: 400rpx;
		border: 2rpx solid #999999;
		border-radius: 30rpx;
		overflow: hidden;
		position: relative;
		margin-left: 10rpx;
	}
	.top-box .top-box-bg{
		width: 100%;
		height: 100%;
	}
	.top-box .top-box-content{
		width: 690rpx;
		/* height: 276rpx; */
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		justify-content: space-between;
		/* align-items: center; */
		margin-top: 30rpx;
		padding: 0 50rpx;
	}
	.top-box-content .top-left-box{
		flex: 1;
	}
	.top-left-box .title{
		font-size: 34rpx;
		font-weight: bold;
		color: #1A181E;
		text-align: center;
	}
	.top-left-box .current-num{
		margin-top: 30rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #000000;
	}
	.top-left-box .current-num text{
		margin-left: 30rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #000000;
	}
	.top-left-box .input-box{
		padding: 16rpx 0;
		display: flex;
		align-items: center;
		/* border-bottom: 1rpx solid #999999; */
		margin-top: 30rpx;
	}
	.top-left-box .input-box text{
		font-size: 28rpx;
		font-weight: bold;
		color: #000000;
	}
	.top-left-box .input-box input{
		margin-left: 15rpx;
		background: #ffffff;
		border-radius: 10rpx;
		width: 350rpx;
		height: 60rpx;
		text-align: center;
		line-height: 38rpx;
		font-size: 18rpx;
		color: #000000;
	}
	.my-input-holder{
		font-size: 24rpx;
		color: #000000;
	}
	.top-left-box .integral-btn{
		margin-top: 30rpx;
		display: flex;
		align-items: center;
	}
	.integral-btn .note{
		font-size: 30rpx;
		font-weight: bold;
		color: #000000;
	}
	.integral-btn .note-num{
		width: 140rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		background: #ffffff;
		border-radius: 10rpx;
		font-size: 24rpx;
		font-weight: bold;
		color: #000000;
		margin-left: 15rpx;
		border:1px solid #1A181E;
	}
	.integral-btn .btn{
		width: 140rpx;
		height: 68rpx;
		text-align: center;
		line-height: 68rpx;
		background: #b4b2b7;
		/* box-shadow: 0px 2px 0px 0px rgba(91, 82, 67, 0.5); */
		border-radius: 10rpx;
		font-size: 20rpx;
		font-weight: bold;
		color: #ffffff;
		margin-left: 90rpx;
	}
	.integral-btn .subbtn{
		width: 140rpx;
		height: 68rpx;
		text-align: center;
		line-height: 68rpx;
		background: #007aff;
		/* box-shadow: 0px 2px 0px 0px rgba(91, 82, 67, 0.5); */
		border-radius: 10rpx;
		font-size: 20rpx;
		font-weight: bold;
		color: #ffffff;
		margin-left: 90rpx;
	}
	.top-box-content .icon-gold-tixian{
		width: 130rpx;
		height: 106rpx;
		flex-shrink: 0;
		margin-left: 20rpx;
	}
</style>

<style>
	.my-data-box-content{
		width: 650rpx;
		position: absolute;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.my-data-box-content2{
		width: 650rpx;
		margin-top: 50rpx;
		position: absolute;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.my-data-box-content3{
		width: 650rpx;
		margin-top: 100rpx;
		position: absolute;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.gold-black-box .list{
		margin-top: 10px;
	}
	.list .my-data-box{
		margin-top: 20rpx;
		width: 730rpx;
		height: 160rpx;
		/* border: 2rpx solid #999999; */
		border-radius: 30rpx;
		overflow: hidden;
		position: relative;
		background-color: #ffffff;
	}
	.myset-data-box{
		margin-top: 20rpx;
		height: 160rpx;
	}
	.list .my-data-box:first-child{
		margin-top: 0;
	}
	.my-data-box .my-data-box-bg{
		width: 100%;
		height: 100%;
	}
	.my-data-box .my-data-box-content{
		width: 690rpx;
		height: 160rpx;
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 40rpx;
	}

	.my-data-box-content .left-box{
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: space-between;
	}
	.left-box .title{
		width: 	500rpx;
		font-size: 34rpx;
		font-weight: bold;
		color: #000000;
		overflow: hidden;    
		text-overflow:ellipsis;    
		white-space: nowrap;
	}
	.left-box .time{
		margin-top: 16rpx;
		font-size: 34rpx;
		color: #000000;
	}
	.my-data-box-content .num{
		margin-left: 10rpx;
		font-size: 40rpx;
		font-weight: bold;
		color: #000000;
	}
	.my-data-box-content .num.up{
		color: #1A181E;
	}
	.item .num.down{
		color: #1A181E;
	}
</style>